<template>
  <div>
    <mt-field
      label="收件人"
      v-model="form.name"
      type="text"
      class="input-clear"
      placeholder="请输入收件人姓名"
    />

    <mt-field
      label="联系方式"
      v-model="form.phone"
      type="text"
      class="input-clear"
      placeholder="请输入手机号"
    />

    <mt-field
      label="所在地区"
      v-model="form.area"
      type="text"
      class="input-clear"
      placeholder="所在地区"
      @click.native="OnClickChooseArea"
    ></mt-field>
    <div class="wrap-distpicker">
      <div class="mask" @click="OnClickChooseArea" v-show="showChooseArea"></div>
      <v-distpicker
        v-show="showChooseArea"
        type="mobile"
        @province="onChangeProvince"
        @city="onChangeCity"
        @area="onChangeArea"
        :province="newInfo.province"
        :city="newInfo.city"
        :area="newInfo.district"
      ></v-distpicker>
    </div>
    

    <mt-field
      label="详细地址"
      v-model="form.detail"
      type="text"
      placeholder="请输入详细地址"
    />

    <div class="button-row">
      <mt-button @click="onClickSave">确认</mt-button>
      <mt-button v-show="id" @click="onClickDelete">删除</mt-button>
    </div>
  </div>
</template>

<script>
import {HTTPGetAddressDetailById,HTTPSaveAddress,HTTPDeleteAddressById} from "@/api/address.js"
import VDistpicker from "v-distpicker";

export default {
  data() {
    return {
      form: {
        name: "",
        phone: "",
        area: "",
        detail: "",
      },
      showChooseArea: false, // 是否显示遮罩层
      newInfo: {
        province: "", // 省
        city: "", // 市
        area: "", // 区
      },
    };
  },
  props: ["id"],
  created() {
    this.getAddressDetailById();
  },
  methods: {
    async getAddressDetailById() {
      if (!this.id) {
        return;
      }

      try {
        let result = await HTTPGetAddressDetailById({ id: this.id }); //获取登录用户的收货地址        
        if (result.code === 1) {
          this.form = result.data; 
          // console.log(this.form) 
        }
        else if(result.code === 2){
          this.$router.push({ name: 'login' })
        }
        else{
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error)
      }
    },//=====================================================
    OnClickChooseArea() {
      this.showChooseArea = !this.showChooseArea;
    },
    onChangeProvince(data) {
      this.newInfo.province = data.value;
    },
    onChangeCity(data) {
      this.newInfo.city = data.value;
    },
    onChangeArea(data) {
      this.newInfo.area = data.value;
      this.form.area =
        this.newInfo.province +
        "-" +
        this.newInfo.city +
        "-" +
        this.newInfo.area;
      this.showChooseArea = false;
    },
    async onClickSave() {
      this.form.id = this.id;
      let params = this.form;
      try {
        let result = await HTTPSaveAddress(params); //        
        if (result.code === 1) {
          this.$toast(result.msg);
        }
        else if(result.code === 2){
          this.$router.push({ name: 'login' })
        }
        else{
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error);        
      }
    },//=====================================================
    async onClickDelete() {      
      try {
        let result = await HTTPDeleteAddressById({ id: this.id }); //获取登录用户的收货地址        
        if (result.code === 1) {
          this.$toast(result.msg);//删除成功
          this.$router.go(-1); //页面跳转
        }
        else if(result.code === 2){ //需要登录
          this.$router.push({ name: 'login' })
        }
        else{ //其他
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error)
        this.$router.go(-1); //页面跳转
      }
    },//=====================================================
  },
  components: {
    "v-distpicker": VDistpicker,
  },
};
</script>

<style lang="scss" scoped>
.button-row {  
  margin: 10px 0;  
  font-size: 14px;
  button{
    width:40%;
  }
}
.divwrap > .mask {
  background: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.divwrap > .distpicker-address-wrapper {
  color: #999;
  background: #fff;
  border-top: 1px solid #ccc;
  z-index: 1;
  height: 300px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>
